<template>
  <div>
    <a-page-header title="文件上传配置">
      <template #extra>
        <a-button @click="update" type="primary">修改</a-button>
      </template>
    </a-page-header>
    <div>
      <a-form
        style="width: 60%; margin: auto"
        v-if="data"
        :model="data"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
      >
        <a-form-item label="文件大小">
          <a-input readonly v-model:value="data.fileSize" suffix="KB" />
        </a-form-item>
        <a-form-item label="文件格式">
          <a-textarea readonly v-model:value="data.mimetype" />
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { getFileConfig, updateFileConfig } from '@/api/middleSystem'
  import { ref } from 'vue'
  import { message } from 'ant-design-vue'
  import { useFormModal } from '@/hooks/useModal/useFormModal'
  import type { FormSchema } from '@/components/core/schema-form/src/types/form'
  import { useI18n } from '@/hooks/useI18n'

  const { t } = useI18n()
  const data = ref()

  const initData = async () => {
    getFileConfig().then((res: any) => {
      data.value = res
      data.value.mimetype = data.value.mimetype.join(',')
    })
  }

  initData()

  const [showModal] = useFormModal()
  const formSchemas: FormSchema[] = [
    {
      field: 'fileSize',
      component: 'Input',
      label: '文件大小',
      rules: [{ required: true }],
    },
    {
      field: 'mimetype',
      component: 'InputTextArea',
      label: '上传格式',
      rules: [{ required: true }],
    },
  ]

  const update = async () => {
    const [formRef] = await showModal({
      modalProps: {
        title: t('common.edit'),
        width: '40%',
        onFinish: async values => {
          let { fileSize, mimetype } = values
          await updateFileConfig(data.value._id, fileSize, mimetype.split(','))
          message.success('操作成功')
          initData()
        },
      },
      formProps: {
        labelWidth: 100,
        layout: 'horizontal',
        schemas: formSchemas,
      },
    })

    let propData = JSON.parse(JSON.stringify(data.value))
    formRef?.setFieldsValue({
      fileSize: propData.fileSize,
      mimetype: propData.mimetype,
    })
  }
</script>

<style lang="scss" scoped>
  .ant-page-header {
    padding: 0 0 24px 0;
  }
  .ant-page-header-heading-title {
    font-size: 16px !important;
  }
</style>
